<template>
  <el-table
    ref="cateTable"
    :data="categoryList"
    id="test111"
    :max-height="tableContainerHeight + 'px'"
    @selection-change="handleSelectionChange"
    @select="select"
    @row-click="rowClick"
  >
    <el-table-column
      type="selection"
      width="50"
      :selectable="selectable"
      align="center"
      v-if="showCheck"
    />
    <el-table-column
      label="权限组"
      align="center"
      key="filePortfolioName"
      prop="filePortfolioName"
      :show-overflow-tooltip="true"
    />
    <el-table-column
      v-for="item in fieldList"
      :key="item.prop"
      :label="item.label"
      align="center"
    >
      <template #default="scope">
        <el-switch
          v-model="scope.row[item.prop]"
          inline-prompt
          active-value="1"
          inactive-value="0"
          active-text="开"
          inactive-text="关"
          :disabled="!$permission('categoryFile:empower')"
          @change="
            (val) => {
              setCheckedRow(val, scope.row)
            }
          "
        />
      </template>
    </el-table-column>
    <el-table-column
      v-if="showOperations"
      label="操作"
      align="center"
      width="60"
      class-name="small-padding fixed-width"
    >
      <template #default="scope">
        <el-button
          v-if="$permission('categoryFile:empower')"
          size="small"
          link
          type="info"
          @click="deleteRow(scope)"
          >移除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <pagination
    v-show="total > 0"
    :total="total"
    v-model:page="_queryParams.curPage"
    v-model:limit="_queryParams.pageSize"
    @size-change="handleSizeChange"
    @pagination="getListDialog"
  />
</template>

<script setup>
const { proxy } = getCurrentInstance()
const emits = defineEmits(['getListDialog', 'delete', 'handleSelectionChange'])

const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  // 是否显示checkbox列
  showCheck: {
    type: Boolean,
    default: true,
  },
  // 是否显示操作列
  showOperations: {
    type: Boolean,
    default: true,
  },
  total: {
    type: Number,
    default: () => {
      return 0
    },
  },
  queryParams: {
    type: Object,
    default: () => {
      return {}
    },
  },
  categoryList: {
    type: Array,
    default: () => {
      return []
    },
  },
})

const fieldList = [
  {
    label: '允许下载',
    prop: 'allowDownloads',
    value: '0',
  },
  {
    label: '允许上传',
    prop: 'allowUpload',
    value: '0',
  },
  {
    label: '允许查看',
    prop: 'allowView',
    value: '0',
  },
  {
    label: '允许预览',
    prop: 'allowPreview',
    value: '0',
  },
  // {
  //   label: '允许删除',
  //   prop: 'allowDeleted',
  //   value: '0',
  // },
  {
    label: '允许打印',
    prop: 'allowPrint',
    value: '0',
  },
]
const tableContainerHeight = ref(500)
const topHeight = ref('')
onMounted(() => {
  setStyle()
})
const _queryParams = computed({
  get() {
    return props.queryParams
  },
  set(val) {
    update('queryParams', val)
  },
})
// 计算表格自适应高度
function setStyle() {
  proxy.$nextTick(() => {
    topHeight.value = document
      .getElementById('test111')
      ?.getBoundingClientRect().top
    if (!topHeight.value) {
      return
    }
    tableContainerHeight.value = document.body.clientHeight - topHeight.value
  })
}

// 点击修改switch是会自动取消选中，需要重新设置选中
function rowClick(row) {
  proxy.$refs.cateTable.toggleRowSelection(row)
  toogleRow()
}

// 列表选中后修改里面radio会取消所有选择，需要重新设置选中
function setCheckedRow(val, row) {
  props.categoryList.forEach((element) => {
    checkArrTemp.value.forEach((item) => {
      if (element.id === item.id) {
        setTimeout(() => {
          proxy.$refs.cateTable.toggleRowSelection(element, true)
        }, 0)
      }
    })
  })
}

function selectable(row) {
  return !row.isDisable
}

function toogleRow() {
  props.categoryList.forEach((element, index) => {
    if (element.isDisable) {
      setTimeout(() => {
        proxy.$refs.cateTable.toggleRowSelection(element, true)
      }, 0)
    }
    if (element.selected) {
      setTimeout(() => {
        proxy.$refs.cateTable.toggleRowSelection(element, true)
      }, 0)
    }
  })
}

function deleteRow(scope) {
  emits('delete', scope)
}

function getListDialog() {
  emits('getListDialog')
}
function handleSizeChange() {
  _queryParams.value.curPage = 1
}
// 表格多选事件
const checkArrTemp = ref([])
function handleSelectionChange(val) {
  checkArrTemp.value = proxy.$fn.deepClone(val)
  emits('handleSelectionChange', val)
}

function select(selection, row) {
  emits('select', selection, row)
}

// 暴露属性，否则在父组件获取不到子组件内的方法
defineExpose({
  toogleRow,
  setStyle,
})
</script>

<style lang="scss" scoped>
.category-container {
  :deep(.el-table__body-wrapper) {
    max-height: 475px;
    // overflow-y: scroll;
  }
}
</style>
